<template>
  <a-card>
    <template #title>
      <a-form layout="vertical">
        <a-row :gutter="24">
          <a-col :md="6" :xs="24" v-permiss="['select-merchant']">
            <a-form-item :label="$t('提现商户')">
              <a-select v-model:value="page.mchId" allowClear>
                <a-select-option v-for="item in merchantList" :key="item.mchId" :value="item.mchId">{{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('平台订单号')">
              <a-input v-model:value="page.platOrderId"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('收款账户名称')">
              <a-input v-model:value="page.userName"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('收款账号')">
              <a-input v-model:value="page.bankNo"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('标识符')">
              <a-input v-model:value="page.identifier"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('提现方式')">
              <a-select v-model:value="page.type" allowClear>
                <a-select-option :value="0">{{ $t('线上') }}</a-select-option>
                <a-select-option :value="1">{{ $t('线下') }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('状态')">
              <a-select v-model:value="page.status" allowClear>
                <a-select-option v-for="item in statusList" :key="item.key" :value="item.key">{{
                    item.value
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('提现时间')">
              <a-range-picker style="width: 100%" v-model:value="page.withdrawalTime" valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('到账时间')">
              <a-range-picker style="width: 100%" v-model:value="page.arrivalTime" valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getTableData">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>
    <div style="text-align: right;margin-bottom: 10px">
      <a-button @click="exportExcel" :loading="exportLoading" v-permiss="['export']">{{ $t('导出') }}</a-button>
      <a-button type="primary" style="margin-left: 10px" @click="handleWithdrawal" v-permiss="['online']">{{
          $t('提现')
        }}
      </a-button>
      <a-button type="primary" style="margin-left: 10px" @click="handleBatchWithdrawal" v-permiss="['batch']">
        {{ $t('批量提现') }}
      </a-button>
      <a-button type="primary" style="margin-left: 10px" @click="handleOfflineWithdrawal" v-permiss="['offline']">
        {{ $t('线下提现') }}
      </a-button>
    </div>
    <a-table :data-source="tableData" :loading="tableLoading" :pagination="pagination" :columns="tableColumn"
             :scroll="{x:true,y:600}">
      <template #handle="{record}">
        <a-button v-permiss="['voucher']" v-show="record.status === 2" type="link" @click="lookVoucher(record)">
          {{ $t('凭证') }}
        </a-button>
      </template>
    </a-table>
    <!--    查看凭证-->
    <a-modal v-model:visible="voucherVisible" width="1200px" :footer="false"
             :mask-closable="false">
      <div style="padding:15px">
        <iframe :src="voucherUrl" frameborder="0" style="width: 100%;height:920px"></iframe>
      </div>
    </a-modal>
    <!-- 线上提现-->
    <a-modal v-model:visible="withdrawalVisible" :title="$t('提现')" @ok="withdrawalConfirm"
             :confirmLoading="withdrawalLoading"
             :after-close="withdrawalClearForm" :mask-closable="false">
      <a-form :model="withdrawalForm" :label-col="{span:6}" :rules="withdrawalFormRules" ref="withdrawalRef">
        <a-form-item :label="$t('可用余额')">
          {{ balance }}
        </a-form-item>
        <a-form-item :label="$t('银行名称')" name="bankCode">
          <a-select v-model:value="withdrawalForm.bankCode">
            <a-select-option v-for="item in bankList" :key="item.bankCode" :value="item.bankCode">{{
                item.bankName
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('收款账户名称')" name="userName">
          <a-input v-model:value="withdrawalForm.userName"/>
        </a-form-item>
        <a-form-item :label="$t('收款账号')" name="bankNo">
          <a-input oninput="value = value.replace(/[^\d]/g, '')" v-model:value="withdrawalForm.bankNo"/>
        </a-form-item>
        <a-form-item :label="$t('提现金额')" name="payAmount">
          <a-input oninput="value = value.replace(/[^\d.]/g, '')" v-model:value="withdrawalForm.payAmount"/>
        </a-form-item>
        <a-form-item :label="$t('手续费收取方式')" name="feeType">
          {{ $t('另计') }}
        </a-form-item>
        <a-form-item :label="$t('交易密码')" name="transPwd">
          <a-input type="password" v-model:value="withdrawalForm.transPwd"/>
        </a-form-item>
        <a-form-item :label="$t('验证码')" name="verifyCode">
          <div style="display: flex">
            <a-input v-model:value="withdrawalForm.verifyCode"/>
            <div style="margin-left: 10px">
              <a-button v-if="!withdrawalCodeState.show" type="primary" :loading="withdrawalVerifyCodeLoading"
                        @click="withdrawalVerifyCode">{{
                  $t('验证码')
                }}
              </a-button>
              <a-button v-else>{{ withdrawalCodeState.num }}s</a-button>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>

    <!--    线下提现-->
    <a-modal v-model:visible="offlineVisible" :title="$t('线下提现')" @ok="offlineConfirm" :after-close="offlineClearForm"
             :confirmLoading="offlineConfirmLoading"
             :mask-closable="false">
      <a-form :model="offlineForm" :label-col="{span:4}" ref="offlineRef" :rules="withdrawalFormRules">
        <a-form-item :label="$t('提现商户')" name="mchId"
                     :rules="{required: true, message: $t('请选择'), trigger: 'change',type:'number'}">
          <a-select v-model:value="offlineForm.mchId" @change="getMchBalance" allowClear>
            <a-select-option v-for="item in merchantList" :key="item.mchId" :value="item.mchId">{{
                item.name
              }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('可用余额')">
          {{ offlineForm.balance }}
        </a-form-item>
        <a-form-item :label="$t('银行名称')" name="bankName">
          <a-input v-model:value="offlineForm.bankName"/>
        </a-form-item>
        <a-form-item :label="$t('收款账号')" name="bankNo">
          <a-input oninput="value = value.replace(/[^\d]/g, '')" v-model:value="offlineForm.bankNo"/>
        </a-form-item>
        <a-form-item :label="$t('账户名称')" name="userName">
          <a-input v-model:value="offlineForm.userName"/>
        </a-form-item>
        <a-form-item :label="$t('提现金额')" name="payAmount"
                     oninput="value = value.replace(/[^\d.]/g, '')"
        >
          <a-input v-model:value="offlineForm.payAmount"/>
        </a-form-item>
        <a-form-item :label="$t('上传凭证')">
          <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :custom-request="uploadOfflineImg"
              :show-upload-list="false"
              accept="image/*"
          >
            <img v-if="offlineForm.imgUrl" :src="offlineForm.imgUrl" style=" width: 100%; height: 100%;" alt="avatar"/>
            <div v-else>
              <plus-outlined></plus-outlined>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>

    <!--    批量提现-->
    <a-modal v-model:visible="batchVisible" :title="$t('批量提现')" @ok="batchConfirm"
             :confirm-loading="batchConfirmLoading"
             :after-close="batchClearForm" :mask-closable="false">
      <a-button type="primary" @click="downTemplate">
        <CloudDownloadOutlined/>
        {{ $t('下载模板') }}
      </a-button>
      <a-upload v-model:file-list="fileList"
                :before-upload="excelFileUpload"
                accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"


      >
        <a-button type="primary" style="margin-left: 10px" :beforeUpload="excelFileUpload">
          <CloudUploadOutlined/>
          {{ $t('上传文件') }}
        </a-button>
      </a-upload>
      <a-form style="margin-top: 15px" :model="batchForm" ref="batchRef" :label-col="{span:4}">
        <a-form-item :label="$t('交易密码')" name="transPwd"
                     :rules="{required: true, message: $t('不能为空'), trigger: 'blur',}">
          <a-input type="password" v-model:value="batchForm.transPwd"/>
        </a-form-item>
        <a-form-item :label="$t('验证码')" name="verifyCode"
                     :rules="{required: true, message: $t('不能为空'), trigger: 'blur',}">
          <div style="display: flex">
            <a-input v-model:value="batchForm.verifyCode"/>
            <div style="margin-left: 10px">
              <a-button v-if="!batchCodeState.show" type="primary" :loading="batchVerifyCodeLoading"
                        @click="batchVerifyCode">{{
                  $t('验证码')
                }}
              </a-button>
              <a-button v-else>{{ batchCodeState.num }}s</a-button>
            </div>
          </div>
        </a-form-item>
        <a-alert v-for="(item,index) in errorMessageList" style="margin-bottom: 10px" :key="index" :message="item.text"
                 type="error" show-icon/>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>

import {computed, onMounted, reactive, ref, toRefs} from "vue";
import {selectMerchant} from "../../../api";
import {PlusOutlined, CloudDownloadOutlined, CloudUploadOutlined} from '@ant-design/icons-vue'
import {
  fetchWithdrawalList,
  fetchBalance,
  fetchBankList,
  onlineWithdrawal,
  withdrawalEmailCode,
  batchWithdrawal,
  offlineWithdrawal, uploadImage, withdrawalListExport,
  withdrawalVoucher
} from "../../../api/capital";
import XLSX from 'xlsx/dist/xlsx.mini.min'
import {message} from "ant-design-vue";
import i18n from "../../../locale";
import {export_json_to_excel} from "../../../utils/exportExcel";
import {formatMoney} from "../../../utils"
import bankDetails from '../../../components/bankDetails/index'

const $t = i18n.global.t
const statusList = [
  {value: $t('打款退回'), key: -1},
  {value: $t('处理中'), key: 1},
  {value: $t('成功'), key: 2},
  {value: $t('失败'), key: 3},
]
const tableColumn = [
  {title: $t('平台订单号'), dataIndex: 'platOrderId', fixed: 'left', width: 200, align: 'center'},
  {title: $t('银行名称'), dataIndex: 'bankName', width: 100, align: 'center'},
  {title: $t('收款账号'), dataIndex: 'bankNo', width: 200, align: 'center'},
  {
    title: $t('账户类型'), dataIndex: 'bankType', width: 100, align: 'center', customRender: ({text}) => {
      return text === 3 ? $t('借记卡') : $t('电子卡')
    }
  },
  {title: $t('收款账户名称'), dataIndex: 'userName', width: 150, align: 'center'},
  {
    title: $t('提现金额'), dataIndex: 'payAmount', width: 100, align: 'center', customRender: ({text}) => {
      return formatMoney(text)
    }
  },
  {
    title: $t('手续费'), dataIndex: 'fee', width: 100, align: 'center', customRender: ({text}) => {
      return formatMoney(text)
    }
  },
  {
    title: $t('手续费扣除方式'), dataIndex: 'feeType', width: 150, align: 'center', customRender: ({text}) => {
      return text === 1 ? $t('手续费另计') : $t('从提现金额中扣除')
    }
  },
  {
    title: $t('扣款金额'), dataIndex: 'deductionAmount', width: 100, align: 'center', customRender: ({text}) => {
      return formatMoney(text)
    }
  },
  {
    title: $t('提现方式'), dataIndex: 'type', width: 100, align: 'center', customRender: ({text}) => {
      return text === 0 ? $t('线上') : $t('线下')
    }
  },
  {title: $t('标识符'), dataIndex: 'identifier', width: 150, align: 'center'},
  {title: $t('提现时间'), dataIndex: 'createTime', width: 200, align: 'center'},
  {title: $t('到账时间'), dataIndex: 'endTime', width: 200, align: 'center'},
  {
    title: $t('状态'), dataIndex: 'status', width: 100, align: 'center', customRender: ({text}) => {
      return [...statusList, ...[{value: $t('处理中'), key: 0}]].find(item => item.key === text).value
    }
  },
  {title: $t('状态描述'), dataIndex: 'desc', width: 250, align: 'center'},
  {
    title: $t('操作'), width: 100, align: 'center', fixed: 'right', slots: {
      customRender: 'handle'
    }
  },
]

export default {
  name: "WithdrawalList",
  components: {
    PlusOutlined,
    CloudUploadOutlined,
    CloudDownloadOutlined,
    bankDetails
  },
  setup() {
    const withdrawalRef = ref(null)
    const offlineRef = ref(null)
    const batchRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      merchantList: [],
      balance: 0,
      tableData: [],
      withdrawalVisible: false,
      withdrawalLoading: false,
      withdrawalForm: {},
      withdrawalFormRules: {
        userName: {required: true, message: $t('不能为空'), trigger: 'blur',},
        bankCode: {required: true, message: $t('请选择'), trigger: 'change'},
        bankNo: {
          required: true, validator: (rule, value) => {
            if (value.length !== 16 && value.length !== 18) {
              return Promise.reject($t('请输入16或18位的账号'))
            }
            return Promise.resolve()
          }, trigger: 'blur'
        },
        payAmount: [{required: true, message: $t('不能为空'), trigger: 'blur'},
          {
            required: true, validator: (rule, value) => {
              if (parseInt(value) < 1) {
                return Promise.reject($t('提现金额不能小于1'))
              }
              return Promise.resolve()
            }, trigger: 'blur'
          }],
        transPwd: {required: true, message: $t('不能为空'), trigger: 'blur'},
        verifyCode: {required: true, message: $t('不能为空'), trigger: 'blur'},
      },
      withdrawalCodeState: {
        num: 120,
        timer: null,
        show: false
      },
      offlineVisible: false,
      offlineForm: {},
      bankList: [],
      batchVisible: false,
      batchForm: {},
      batchCodeState: {
        num: 120,
        timer: null,
        show: false
      },
      tableLoading: false,
      fileList: [],
      exportLoading: false,
      errorMessageList: [],
      batchConfirmLoading: false,
      offlineConfirmLoading: false,
      withdrawalVerifyCodeLoading: false,
      batchVerifyCodeLoading: false,
      voucherVisible: false,
      voucherUrl: ""
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + $t('条'),
      onChange: (value) => {
        state.page.pageNum = value
        methods.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.getTableData()
      }
    }))
    const methods = {
      async getTableData() {
        state.tableLoading = true
        const [createStartTime, createEndTime] = state.page.withdrawalTime || []
        const [startTime, endTime] = state.page.arrivalTime || []
        const params = {
          createStartTime, createEndTime, startTime, endTime,
          ...state.page,
          withdrawalTime: undefined,
          arrivalTime: undefined
        }
        const res = await fetchWithdrawalList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableLoading = false
          state.page.total = total
          state.tableData = list
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      // 线下提现
      handleOfflineWithdrawal() {
        state.offlineVisible = true
      },
      // 线下提现提交
      offlineConfirm() {
        offlineRef.value.validate().then(async () => {
          state.offlineConfirmLoading = true
          const res = await offlineWithdrawal({
            ...state.offlineForm,
            payAmount: parseFloat(state.offlineForm.payAmount)
          })
          if (res.code === 200) {
            message.success($t('操作成功'))
            state.offlineVisible = false
            state.offlineConfirmLoading = false
            methods.getTableData()
          } else {
            state.offlineConfirmLoading = false
          }
        })
      },
      // 查看凭证
      async lookVoucher({id}) {
        state.voucherUrl = ""
        const res = await withdrawalVoucher({id})
        if (res.code === 200) {
          state.voucherUrl = res.data || ""
          state.voucherVisible = true
        }
      },
      excelFileUpload(file) {
        console.log(file)
        if (state.fileList.length > 0) {
          message.error($t('最多长传一个文件'))
          return Promise.reject()
        }
        return false
      },
      offlineClearForm() {
        state.offlineForm = {}
        offlineRef.value.resetFields()
      },
      // 批量提现
      handleBatchWithdrawal() {
        state.batchVisible = true
      },
      // 下载模板
      downTemplate() {
        const url = 'https://ddhkapps.oss-cn-hongkong.aliyuncs.com/pay_file/withdrawal.xlsx'
        const a = document.createElement('a')
        a.href = url
        a.click()
        a.remove()
      },
      // 批量提现提交
      batchConfirm() {
        batchRef.value.validate().then(async () => {
          if (state.fileList.length === 0) return message.error($t('请上传文件'))
          const file = state.fileList[0].originFileObj
          let reader = new FileReader()
          let list = []
          reader.onload = async (e) => {
            let bstr = e.target.result;
            let wb = XLSX.read(bstr, {type: 'binary', cellDates: true});
            let wsname = wb.SheetNames[0];
            let ws = wb.Sheets[wsname];
            let data = XLSX.utils.sheet_to_json(ws, {header: 1});
            console.log(data)
            data.filter(i => i.length !== 0).forEach((el, index) => {
              if (index !== 0) {
                // if (typeof el[2] !== 'number') {
                //   message.error($t('第') + 3 + $t('列') + $t('第') + index + $t('行') + $t('格式错误'), 6)
                //   throw new Error("excel模板解析错误")
                // }
                if (typeof el[4] !== 'number') {
                  message.error($t('第') + 5 + $t('列') + $t('第') + index + $t('行') + $t('格式错误'), 6)
                  throw new Error("excel模板解析错误")
                }
                list.push({
                  bankName: el[0],
                  bankType: el[1] === 'debit card' ? 3 : el[1] === 'clabe' ? 40 : 0,
                  bankNo: el[2] + '',
                  userName: el[3],
                  payAmount: el[4],
                })
              }
            })
            state.batchConfirmLoading = true
            const res = await batchWithdrawal({...state.batchForm, list})
            if (res.code === 200) {
              const {errorCount, list} = res.data
              if (errorCount > 0) {
                state.errorMessageList = list.map(item => {
                  item.text = $t('第') + item.len + $t('条') + item.message
                  return item
                })
                state.batchConfirmLoading = false
              } else {
                state.batchConfirmLoading = false
                message.success($t('操作成功'))
                methods.getTableData()
                state.batchVisible = false
              }
            } else {
              state.batchConfirmLoading = false
            }
          }
          reader.readAsBinaryString(file);
        })
      },
      batchClearForm() {
        state.batchForm = {}
        state.fileList = []
        state.errorMessageList = []
        batchRef.value.resetFields()
      },
      // 获取可用金额
      async getBalance() {
        const res = await fetchBalance()
        if (res.code === 200) {
          state.balance = res.data
        }
      },
      // 获取商户总金额
      async getMchBalance(mchId) {
        const res = await fetchBalance({mchId})
        if (res.code === 200) {
          state.offlineForm.balance = res.data
        }
      },
      // 提现
      async handleWithdrawal() {
        methods.getBankCardList()
        methods.getBalance()
        state.withdrawalVisible = true
      },
      // 提现提交
      withdrawalConfirm() {
        withdrawalRef.value.validate().then(async () => {
          state.withdrawalLoading = true
          const res = await onlineWithdrawal({
            ...state.withdrawalForm,
            feeType: 1,
            payAmount: parseFloat(state.withdrawalForm.payAmount),
            bankType: state.withdrawalForm.bankNo.length === 16 ? 3 : 40
          })
          if (res.code === 200) {
            message.success($t('提现成功'))
            state.withdrawalVisible = false
            state.withdrawalLoading = false
            methods.getTableData()
          } else {
            state.withdrawalLoading = false
          }
        })
      },
      withdrawalClearForm() {
        state.withdrawalForm = {}
        withdrawalRef.value.resetFields()
      },
      // 批量提现发送验证码
      async batchVerifyCode() {
        batchRef.value.validateFields(['transPwd']).then(async () => {
          state.batchVerifyCodeLoading = true
          const res = await withdrawalEmailCode()
          if (res.code === 200) {
            message.success($t('验证码已发送到绑定邮箱'))
            state.batchCodeState.show = true
            state.batchCodeState.timer = setInterval(() => {
              state.batchCodeState.num--
              if (state.batchCodeState.num <= 0) {
                state.batchCodeState.show = false
                state.batchCodeState.num = 120
                clearInterval(state.batchCodeState.timer)
              }
            }, 1000)
          }
          state.batchVerifyCodeLoading = false
        })
      },
      // 线上提现短信验证码
      async withdrawalVerifyCode() {
        withdrawalRef.value.validateFields(['transPwd']).then(async () => {
          state.withdrawalVerifyCodeLoading = true
          const res = await withdrawalEmailCode()
          if (res.code === 200) {
            message.success($t('验证码已发送到绑定邮箱'))
            state.withdrawalCodeState.show = true
            state.withdrawalCodeState.timer = setInterval(() => {
              state.withdrawalCodeState.num--
              if (state.withdrawalCodeState.num <= 0) {
                state.withdrawalCodeState.show = false
                state.withdrawalCodeState.num = 120
                clearInterval(state.withdrawalCodeState.timer)
              }
            }, 1000)
          }
          state.withdrawalVerifyCodeLoading = false
        })
      },
      async uploadOfflineImg(data) {
        const hide = message.loading($t('上传中...'), 0)
        const formData = new FormData()
        formData.append('file', data.file)
        const res = await uploadImage(formData)
        if (res.code === 200) {
          state.offlineForm.imgUrl = res.data
          hide()
        } else {
          hide()
        }
      },
      async exportExcel() {
        state.exportLoading = true
        const [createStartTime, createEndTime] = state.page.withdrawalTime || []
        const [startTime, endTime] = state.page.arrivalTime || []
        const params = {
          createStartTime, createEndTime, startTime, endTime,
          ...state.page,
          withdrawalTime: undefined,
          arrivalTime: undefined
        }
        const res = await withdrawalListExport(params)
        if (res.code === 200) {
          const headerData = tableColumn.filter(item => item.title !== $t('操作'))
          const column = headerData.map(item => item.title)
          const filterVal = headerData.map(item => item.dataIndex)
          const list = [...res.data].map((item) => {
            item.status = statusList.find(_ => _.key === item.status).value
            item.bankType = item.bankType === 3 ? $t('借记卡') : $t('电子卡')
            item.feeType = item.feeType === 1 ? $t('手续费另计') : $t('从提现金额中扣除')
            item.type = item.type === 0 ? $t('线上') : $t('线下')
            return item;
          }).map((v) => filterVal.map((j) => v[j]));
          console.log(column)
          console.log(list)
          const fileName = $t("提现列表");
          export_json_to_excel({
            header: column,
            data: list,
            filename: fileName,
          });
          state.exportLoading = false
        } else {
          state.exportLoading = false
        }
      },
      async getBankCardList() {
        const res = await fetchBankList()
        if (res.code === 200) {
          state.bankList = res.data
        }
      },
      getSelect() {
        selectMerchant().then(res => {
          state.merchantList = res
        })
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getSelect()
    })
    return {
      withdrawalRef,
      statusList,
      offlineRef,
      batchRef,
      tableColumn,
      pagination,
      ...methods,
      ...toRefs(state)
    }
  }
}
</script>

<style>
</style>
